<template>
  <div class="app-container">
      <el-row :gutter="10" >
        <el-col :span="8">
          <div class="count" @click="$router.push('/pending')">
            <div>
              <p>待我处理</p>
              <div>9</div>
            </div>
            <img src="@/assets/image/todo.png" alt="">
          </div>
        </el-col>
        <el-col :span="8">
          <div class="count" @click="$router.push('/launch')">
            <div>
              <p>我发起的</p>
              <div>9</div>
            </div>
            <img src="@/assets/image/submit.png" alt="">
          </div>
        </el-col>
        <el-col :span="8">
          <div class="count" @click="$router.push('/about')">
            <div>
              <p>关于我的</p>
              <div>14</div>
            </div>
            <img src="@/assets/image/about.png" alt="">
          </div>
        </el-col>
      </el-row>

      <el-collapse v-model="actives" accordion>
        <el-collapse-item v-for="(group, index) in list" :key="index"
                          :title="group.name" :name="group.name" class="group"
                          v-show="group.items.length > 0 && group.id > 0">
          <div>
            <div v-for="(item, index) in group.items" :key="index" class="form-item" @click="enterItem(item)">
              <div class="form-item-box">
                <i :class="item.logo.icon" :style="'background: '+item.logo.background"></i>
                <div class="item-name">{{item.formName}}</div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>

    <el-dialog title="发起审批" width="800px" :visible.sync="openItemDl" :close-on-click-modal="false">
      <initiate-process ref="processForm" :code="selectForm.formId" v-if="openItemDl"></initiate-process>
      <span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="openItemDl = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="submitForm">提 交</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
import {getWorkspaceList,startProcess} from "@/api/design";
import InitiateProcess from "@/views/workspace/InitiateProcess.vue";

export default {
  name: "WorkSpace",
  components: {InitiateProcess},
  data() {
    return {
      actives: [],
      list: [],
      openItemDl: false,
      selectForm: {},
      // startUserInfo: {
      //     name:'',
      //     id:''
      // }
    }
  },
  mounted() {
    this.getWorkspaceList()
  },
  methods: {
    getWorkspaceList() {
      getWorkspaceList().then(res=> {
        this.list = res.data
        this.list.forEach(group => {
          this.actives.push(group.name)
        })
      })
    },
    enterItem(item) {
      this.selectForm = item
      this.openItemDl = true
    },
    submitForm(){
      const formData = this.$refs.processForm.getFormData()
      const form = this.$refs.processForm.getForm()
      const strUserInfo = localStorage.getItem("user")
      console.log('formData', formData)
      console.log('form', form)
      this.$refs.processForm.validate(valid => {
        if (valid) {
          startProcess({
            processDefinitionId: form.processDefinitionId,
            formData,
            startUserInfo: JSON.parse(strUserInfo)
          }).then(res=>{
            // this.strUserInfo.name =  res.data.result.name
            // this.strUserInfo.id =  res.data.result.id
            console.log("startProcess",res)
            this.openItemDl  = false
            this.$message.success("表单提交成功")
          }).catch(err =>
              this.$message.error('今日已经提交过不需要重复提交'),
          )


        } else {
          this.$message.warning("请完善表单😥")
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .app-container {
    .el-row {
      height: 100px;
      .el-col-8 {
        .count {
          cursor: pointer;
          position: relative;
          background: #e2e2f1;
          border-radius: 8px;
          height: 80px;
          margin: 0 15px 20px 15px;
          img {
            position: absolute;
            right: 15px;
            top: 20px;
            width: 40px;
            height: 40px;
          }
          > div {
            left: 15px;
            position: absolute;
            p {
              color: #303133;
              font-size: 14px;
            }
            .div {
              color: #b9b8b8;
              font-size: 17px;
              font-weight: 700;
            }
          }
          &:hover {
            box-shadow: 0 0 10px #b5a7a7;
          }
        }
      }
    }

    /deep/.el-collapse {
      padding: 0 15px;

      .el-collapse-item__header {
        font-size: medium;
        border-bottom: none;
        background-color: transparent;
        .el-collapse-item__arrow {
          display: none;
        }
      }

      .el-collapse-item__wrap {
        padding: 20px 10px;
        background-color: transparent;
      }

      .el-tabs--border-card .el-tabs__content {
        padding: 40px 15px;
      }
    }
    .group {
      border-radius: 15px;
      padding: 20px 20px;
      margin-top: 15px;
      background: #e2e2f1;
    }
    .form-item {
      display: inline-block;
      cursor: pointer;
      border-radius: 10px;
      text-align: center;
      margin: 5px;
      padding: 10px;
      width: 70px;
      .form-item-box {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      &:hover {
        border: 1px solid #448ed7;

        span {
          display: inline-block !important;
        }
      }

      i {
        border-radius: 8px;
        font-size: 20px;
        color: #fff;
        background: #38adff;
        height: 37px;
        width: 37px;
        line-height: 37px;
      }
      .item-name {
        font-size: 12px;
        color: #303133;
        max-width: 80px;
        margin-top: 3px;
      }
      div {
        height: 35px;
        line-height: 35px;

        div{
          display: inline-block;
          width: 100px;
        }

        span {
          display: none;
          float: right;
          color: #38adff;
          font-size: 12px;
        }
      }

    }
  }
</style>